<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <fieldset>
        <legend>Ajax 表单请求</legend>
        <h1>The Ajax 03 Page</h1>
        <form>
            <input type="text" id="text" onblur="doCheck()" />
            <button type="button" onclick="doSave()">Save</button>
        </form>
        <span id="result"></span>
    </fieldset>


</div>
</body>
<script>
    function doCheck(){
        let name = document.getElementById("text").value;
        let url = "http://localhost:1314/doCheck";
        var params = name;
        doAjaxGet(url,params,function(result){
            document.getElementById("result").innerHTML=result;
        })
    };
    function doSave(){
        debugger;
        let url = "http://localhost:1314/doSave";
        let params = "name="+document.getElementById("text").value;
        doAjaxPost(url,params,function(result){
            document.getElementById("result").innerHTML=result;
        });
    };
    function doAjaxPost(url,params,callback){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            callback(xhr.responseText);
        };
        xhr.open("POST",url,true);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(params);
    };
    function doAjaxGet(url,params,callback){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                callback(xhr.responseText);
            }
        };
        xhr.open("get",url+"/"+params,true);
        xhr.send();
    }

</script>
</html>